<% title t("views.tags.meta.title") %>

<%= content_for :page_meta do %>
  <link rel="canonical" href="<%= app_url("/tags") %>" />
  <meta name="description" content="<%= t("views.tags.meta.description", community: community_name) %>">
  <%= meta_keywords_default %>

  <meta property="og:type" content="article" />
  <meta property="og:url" content="<%= app_url("/tags") %>" />
  <meta property="og:title" content="<%= t("views.tags.meta.description", community: community_name) %>" />
  <meta property="og:image" content="<%= Settings::General.main_social_image %>" />
  <meta property="og:description" content="<%= t("views.tags.meta.og.description", community: community_name) %>" />
  <meta property="og:site_name" content="<%= community_name %>" />

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@<%= Settings::General.social_media_handles["twitter"] %>">
  <meta name="twitter:title" content="<%= t("views.tags.meta.description", community: community_name) %>">
  <meta name="twitter:description" content="<%= t("views.tags.meta.og.description", community: community_name) %>">
  <meta name="twitter:image:src" content="<%= Settings::General.main_social_image %>">
<% end %>

<main id="main-content" class="crayons-layout crayons-layout--header-inside">
  <header class="crayons-page-header">
    <h1 class="crayons-title">
      <% if params[:q].present? %>
        <%= t("views.tags.heading.search_results", q: params[:q]) %>
      <% else %>
        <%= t("views.tags.heading.default") %>
      <% end %>
    </h1>
    <div class="tags-interaction-container flex flex-col m:flex-row">
      <div class="tags-interaction-container__buttons">
        <%= link_to t("views.tags.following_tags"), dashboard_following_tags_path, class: "crayons-btn crayons-btn--ghost" %>
        <%= link_to t("views.tags.hidden_tags"), dashboard_hidden_tags_path, class: "crayons-btn crayons-btn--ghost" %>
      </div>
      <form accept-charset="UTF-8" method="get" action="<%= tags_path %>" role="search">
        <div class="crayons-fields crayons-fields--horizontal">
          <div class="crayons-field flex-1 relative">
            <input class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" aria-label="<%= t("views.tags.search.aria_labels.search_input") %>" name="q" placeholder="<%= t("views.tags.search.placeholder") %>" autocomplete="off" />
            <button type="submit" aria-label="<%= t("views.tags.search.aria_labels.submit") %>" class="c-btn c-btn--icon-alone absolute inset-px left-auto mt-0 py-0">
              <%= crayons_icon_tag(:search, aria_hidden: true, title: t("views.search.icon.title")) %>
            </button>
          </div>
        </div>
      </form>
    </div>
  </header>
  <% if @tags.empty? %>
    <div class="articles-list crayons-layout__content" id="articles-list" data-follow-button-container="true">
      <div id="banner-section"></div>
      <div class="substories search-results-loaded" id="substories"><div class="p-9 align-center crayons-card">No results match that query</div></div>
    </div>
  <% else %>
    <div class="grid gap-3 m:gap-4 l:gap-4 m:grid-cols-2 l:grid-cols-4 px-3 m:px-0 pb-3" data-follow-button-container="true">
      <% @tags.includes([:badge]).each do |tag| %>
        <div data-tag-id="<%= tag.id %>" data-tag-name="<%= tag.name %>" id="tag-<%= tag.id %>" class="js-tag-card tag-card crayons-card p-3 pt-2 m:p-5 m:pt-4 relative flex flex-col">
          <div>
            <div class="mb-1 flex items-center justify-between">
              <h4 class="-ml-2">
                <%= render_tag_link(tag.accessible_name) %>
              </h4>
              <div class="fs-xs color-base-60"><%= t("views.tags.published", count: number_with_delimiter(tag.taggings_count, delimiter: ",")) %></div>
            </div>
            <% if tag.short_summary.present? %>
              <p class="mb-6 fs-s color-base-70 truncate-at-3"><%= sanitize tag.short_summary %></p>
            <% end %>
          </div>
          <div id="tag-buttons-<%= tag.id %>" class="mt-auto flex items-end justify-between">
            <div class="flex gap-2">
              <button
                class="c-btn c-btn--primary js-follow-tag-button"
                aria-label="<%= t("views.tags.aria_labels.follow", tag_name: tag.name) %>">
                <%= t("views.tags.follow") %>
              </button>
              <button
                class="c-btn js-hide-tag-button"
                aria-label="<%= t("views.tags.aria_labels.hide", tag_name: tag.name) %>">
                <%= t("views.tags.hide") %>
              </button>
            </div>
            <% if tag.badge_id && tag.badge %>
              <img src="<%= optimized_image_url(tag.badge.badge_image_url, width: 180) %>" class="tag-card__badge" alt="" loading="lazy" />
            <% end %>
          </div>

        </div>
      <% end %>
    </div>
  <% end %>
</main>

<%= javascript_include_tag "tagFollows", defer: true %>
